<template>
    <div class="goodsinfo-ct">

        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        >
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList=lunbotu :isfull=false></swiper>
					</div>
				</div>
			</div>

			<div class="mui-card">
				<div class="mui-card-content">
                    <div class="mui-card-header">{{goodsinfo.title}}</div>
					<div class="mui-card-content-inner">
                        <p class="price">
                            市场价: <del>¥{{goodsinfo.market_price}}</del> &nbsp;&nbsp;销售价: <span class="now_price">¥{{goodsinfo.sell_price}}</span>
                        </p>
                        <div class="buy">
                            <p class="buyp">
                            购买数量:
                            </p>
                            <numbox @getcount="getSelectCount" :max="goodsinfo.stock_quantity"></numbox>
                        </div>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>

                            <!-- 子组件向父组件传值  事件调用机制 -->
                            <!-- 本质: 父向子传递方法,子调用这个方法,同时把 数据当做参数 传递给这个方法 -->
                        </p>
					</div>
				</div>
			</div>

            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
                    <mt-button type="primary" size="small" @click="goDesc(id)">图文介绍</mt-button>
                    <mt-button type="danger" size="small" @click="goComment(id)">商品评论</mt-button>
				</div>
			</div>
    </div>
</template>

<script>
import swiper from '../subcomponents/swipe.vue'
import numbox from '../subcomponents/numbox.vue'
import mui from '../../lib/mui/js/mui.min.js'


export default {
    data(){
        return{
            id: this.$route.params.id,
            lunbotu : [],
            goodsinfo: {},
            ballFlag: false,
            selectedCount:1,
        }
    },
    created(){
        this.getlunbotu();
        this.getgoodsinfo();
    },
    methods:{
        getlunbotu(){
            this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(result => {
                if(result.body.status ===0){
                    result.body.message.forEach(item=>{
                        item.img_url= item.src;
                    });
                    this.lunbotu = result.body.message;
                    // console.log(result.body.message);
                }
            })
        },
        getgoodsinfo(){
            this.$http.get('http://www.liulongbin.top:3005/api/goods/getinfo/' + this.id).then(result => {
                if(result.body.status===0){
                    this.goodsinfo = result.body.message[0];
                }
            })
        },
        goDesc(id){
            this.$router.push( {name: 'goodsdesc', params: { id } } )
        },
        goComment(id){
            this.$router.push( {name: 'goodscomment', params: { id } } )

        },
        addShopCar(){
            this.ballFlag = !this.ballFlag;

            var goodsinfo = {
                id: this.id, 
                count: this.selectedCount,
                price: this.goodsinfo.sell_price,
                selected: true
            };

            // 调用 store 中 mutations 中的方法
            this.$store.commit("addToCar", goodsinfo);
        },
        beforeEnter(el){
            el.style.transform = "translate(0, 0)";
        },
        enter(el, done){
            el.offsetWidth;

            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const badgePosition = document.getElementById('badge').getBoundingClientRect();

            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;

            // el.style.transform = 'translate(${xDist}px, ${yDist}px)';
            el.style.transform = "translate("+xDist+"px, "+yDist+"px)";
            el.style.transition = "all 1s ease";
            done()
        },
        afterEnter(el){
            this.ballFlag = !this.ballFlag;
        },
        getSelectCount(count){

            this.selectedCount = count;
        },
    },
    components:{
        swiper,
        numbox
    }
}
</script>

<style lang="scss" scoped>
.goodsinfo-ct {
    background-color: #eee;
    overflow: hidden;

    .now_price {
        color: red;
        font-size: 14px;
        font-weight: 700;
    }
    p {
        margin: 0;
        padding: 0;
    }
    .buy {
        margin: 10px 0;
        // height: 40px;
        // line-height: 40px;
    }
    .buyp {
        // float: left;
        display: inline-block;
    }
    

    .ball {
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: red;
        border-radius: 50%;
        z-index: 99;
        top: 390px;
        left: 142px;
    }
}
</style>
